<template>
  <div id="app">
    <!--  导航栏  -->
    <div class="navbar">
      <div class="containner flex item-center justify-between">
        <div class="navbar-left flex item-center text-sm">
          <router-link class="router-link brand red" to="/">学掌门商城</router-link>
        </div>
        <div class="navbar-right flex item-center justify-end">
          <router-link class="router-link text-sm gray hover-red" to="/login">
            你好，{{user_info == null?'请登录':user_info.user_name}}
          </router-link>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm red" to="/regist">免费注册</router-link>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm gray hover-red" to="/orderlist">我的订单
          </router-link>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/customer/vip">我的会员</a>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm gray hover-red" to="/address">收货信息
          </router-link>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/service">客户服务</a>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/nav">网站导航</a>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/mobile">手机学掌门</a>
        </div>
      </div>
    </div>
    <!--  /导航栏  -->
    <!--  搜索栏  -->
    <div class="search-bar containner flex justify-between item-center mt-20">
      <img src="./assets/img/logo.png" width="140px" />
      <div class="search-bar-center">
        <div class="flex item-center justify-center">
          <div class="flex item-center">
            <input type="text" class="search-bar-input" placeholder="商品名称、品牌、分类、规格属性……" />
            <button class="search-bar-btn hand">搜索</button>
          </div>
          <button class="search-bar-cart hand ml-20" @click="cart_clicked()">我的购物车</button>
        </div>
        <div class="search-bar-keywords flex justify-around item-center mt-10">
          <div class="hand hover-red red text-sm">春日环游记</div>
          <div class="hand hover-red gray text-sm">iphone 12</div>
          <div class="hand hover-red gray text-sm">小米</div>
          <div class="hand hover-red gray text-sm">榴莲尝鲜</div>
          <div class="hand hover-red gray text-sm">生鲜五折</div>
          <div class="hand hover-red gray text-sm">品质家电</div>
          <div class="hand hover-red gray text-sm">新品激光</div>
          <div class="hand hover-red gray text-sm">春茶</div>
          <div class="hand hover-red gray text-sm">正品农贸</div>
          <div class="hand hover-red gray text-sm">嗨9购了</div>
          <div class="hand hover-red gray text-sm">鱼人节好物</div>
        </div>
        <div class="flex justify-between item-center mt-20">
          <div class="hand hover-red red text-lg">秒杀</div>
          <div class="hand hover-red gray text-lg">优惠券</div>
          <div class="hand hover-red gray text-lg">学掌门会员</div>
          <div class="hand hover-red gray text-lg">品牌闪购</div>
          <div class="hand hover-red gray text-lg">拍卖</div>
          <div class="hand hover-red gray text-lg">家电数码</div>
          <div class="hand hover-red gray text-lg">超市日用</div>
          <div class="hand hover-red gray text-lg">蔬果生鲜</div>
          <div class="hand hover-red gray text-lg">国际好货</div>
          <div class="hand hover-red gray text-lg">潮流服饰</div>
        </div>
      </div>
      <div class="search-bar-right"></div>
    </div>
    <!--  /搜索栏  -->

    <!--  正文内容  -->
    <div class=" mt-10 py-10">
      <router-view></router-view>
    </div>
    <!--  /正文内容  -->

    <!--  页脚  -->
    <div class="footer">
      <div class="containner">
        <div class="flex justify-between">
          <div class="footer-left flex">
            <div class="footer-list">
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-text">中国买家用户使用得更多的商城平台</div>
              <div class="footer-list-text">学掌门平台打造的<span class="red">"网购神器"</span></div>
              <div class="footer-list-text"><span class="red">60,000</span> 多个专业领域</div>
              <div class="footer-list-text"><span class="red">600,000</span> 多个品牌</div>
              <div class="footer-list-text"><span class="red">760,000,000</span> 个商品</div>
              <div class="footer-list-text"><span class="red">38,000</span> 多个分类</div>
            </div>

            <div class="footer-list">
              <div class="footer-list-title">关于我们</div>
              <div class="footer-list-text">关于学掌门</div>
              <div class="footer-list-text">隐私政策</div>
              <div class="footer-list-text">商城平台服务协议</div>
              <div class="footer-list-text">网络信息侵权通知指引</div>
              <div class="footer-list-text">学掌门商城服务监督员</div>
              <div class="footer-list-text">网站地图</div>
              <div class="footer-list-text">联系我们</div>
            </div>

            <div class="footer-list">
              <div class="footer-list-title">Vip服务</div>
              <div class="footer-list-text">商品攻略 免费体验</div>
              <div class="footer-list-text">商品问答 评估指南</div>
              <div class="footer-list-text">专业咨询 海量宝贝</div>
              <div class="footer-list-text">偏好设置 随机抽奖</div>
              <div class="footer-list-text">自动评论 账单统计</div>
              <div class="footer-list-text">消费分析 APP下载</div>
              <div class="footer-list-text">特价秒杀 发现更多</div>
            </div>
          </div>

          <div class="footer-right flex">
            <div class="footer-list-right">
              <img src="./assets/img/index_bottom_wechat.png" />
              <div class="footer-list-title">学掌门APP</div>
              <div class="footer-list-title">扫描立即下载</div>
            </div>
            <div class="footer-list-right">
              <img src="./assets/img/index_bottom_wechat.png" />
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-title">订阅号</div>
            </div>
            <div class="footer-list-right">
              <img src="./assets/img/index_bottom_wechat.png" />
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-title">官方服务号</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  /页脚  -->

  </div>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      /* user_info(){
        this.$store.state.user_info;
      } */
      // ...mapState({'user_info':user_info})
      ...mapState('customer', ['user_info'])
    },
    methods: {
      cart_clicked() {
        console.log("fsfsfs")
        this.$router.push({
          path: '/cart'
        })
      }
    }
  }
</script>
<style>
  @import './assets/css/app.css'
</style>
